import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Form, Icon, Modal, Table, message, Card, Row, Col, Popconfirm, Button, Popover } from 'antd';
import NewVendorForm from 'containers/request/new-request/new-vendor-form'

import SearchArea from 'components/search-area'
import requestService from 'containers/request/request.service'

import 'styles/request/new-request/new-ven-master.scss'

class NewVenMaster extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      newVendorVisible: false, // 增加收款人
      footer: [], // 选择收款人自定义弹款底部
      accountFooter: [], // 选择银行卡号底部
      loading: false,
      payeeModalVisible: false,
      accountModalVisible: false,
      searchForm: [{type: 'input', id: 'venNickname', label: messages('request.key240'/*名称*/)}],
      searchParams: {},
      accountInfoSearchForm: [{type: 'input', id: 'keyword', label: messages('request.key587')/*银行卡号／开户银行*/}],
      columns: [
        {
          title: messages('common.sequence'),
          dataIndex: 'index',
          width: '10%',
          render: (value, record, index) => index + 1
        },
        {
          title: messages('request.key240'/*名称*/),
          dataIndex: 'venNickname' ,
          render:(value,record)=>(+record.venType === 1002?<span style={{color:'#dcdcdc'}}>{value}({messages('request.key241'/*已停用*/)})</span>:value)
        }
      ],
      data: [],
      page: 0,
      pageSize: 10,
      pagination: {
        total: 0
      },
      payeeInfo: {},
      accountColumns: [
        {title: messages('request.key242'/*供应商收款账号*/), dataIndex: 'bankAccount', width: '20%', render: value =>
          <Popover content={value}>{value}</Popover>},
        {title: messages('request.key140'/*开户银行*/), dataIndex: 'bankName', width: '35%', render: value =>
          <Popover content={value}>{value}</Popover>},
        {title: messages('request.key243'/*开户银行联行号*/), dataIndex: 'bankCode', width: '20%', render: value =>
          <Popover content={value}>{value}</Popover>},
        {title: messages('request.key244'/*开户银行所在地*/), dataIndex: 'bankOpeningCity', width: '18%', render: value =>
          <Popover content={value}>{value}</Popover>}
      ],
      accountData: [],
      selectedRowKeys: [],
      selectedRows: [],
      value: '',
      chooseRows: {},
      chooseInfo: {},
    }
  }

  componentWillMount() {
    this.setFooter();
  }

  componentDidMount() {
    this.setState({value: this.props.value}, () => {
      this.state.value && this.getAccountList(this.state.value.split(",")[0],(this.state.value.split(",")[1]))
    })
  }

  // 设置表单自定义低部
  setFooter = () => {
    const {formDetail} = this.props;
    let customFormPropertyMap = formDetail ? formDetail.customFormPropertyMap : {};
    let footer = [],
        accountFooter = [];
    // 可以手动添加收款人按钮
    // 没有搜索到想要的供应商？新增供应商
    let addNewSupplierBtn = (<div style={{float: 'left'}}>
      {messages('request.key245'/*没有搜索到想要的供应商*/)}? <Button type='primary' size="small" onClick={() => {
      this.setState({newVendorVisible: true, payeeModalVisible: false, chooseInfo: {}})
    }}>{messages('request.key246'/*新增供应商*/)}</Button>
    </div>);
    // 没有想要的收款账号？新增银行账号
    let addNewBankInfoBtn= (<div style={{float:'left'}}>
      {messages('request.key247'/*没有想要的收款账号*/)}? <Button type='primary' size="small"
                                                              onClick={this.addNewBankInfoBtnHandler}>
      {messages('request.key248'/*新增银行账号*/)}</Button>
    </div>);
    // 取消按钮
    let cancelBtn = (<Button type="default" onClick={this.handleCancel}>{messages('common.cancel')}</Button>);
    // 返回按钮
    let backBtn = (<Button type="default" onClick={() => {this.handleAccountModalShow(false)}}>{messages('common.back')}</Button>);
    // 确认按钮
    let okBtn = (<Button type="primary" onClick={this.handleModalOk}>{messages('common.ok')}</Button>);
    customFormPropertyMap && `${customFormPropertyMap['document.venmasteradd.enable']}` === 'true' && (
      footer.push(addNewSupplierBtn), accountFooter.push(addNewBankInfoBtn)
    );
    footer.push(cancelBtn);
    accountFooter.push(backBtn);
    accountFooter.push(okBtn);
    this.setState({footer, accountFooter});
  };

  //新增新增银行账号的逻辑，需要判断：如果是租户级的供应商，不允许新增银行账户
  addNewBankInfoBtnHandler = () => {
    if(this.state.chooseInfo.source === "TENANT"){
      // "租户级的供应商，不允许新增银行账户"
      message.warn(messages('request.key249'/*租户级的供应商，不允许新增银行账户*/))

    }else {
      this.setState({newVendorVisible: true, accountModalVisible: false})
    }
  }

  getVenMasterList = () => {
    const {page, pageSize, searchParams, payeeInfo} = this.state;
    let params = {
      page: page,
      size: pageSize,
      venNickname: searchParams.venNickname,
      companyOid: this.props.companyOid,
      userOid: this.props.userOid
    };
    this.setState({loading: true});
    requestService.getVenMasterInfo(params).then(res => {
      let data = res.data.body;
      data.map(item => {
        if (payeeInfo && item.id === payeeInfo.id && item.venType === 1002) {
          Modal.info({
            title: messages('request.key250'/*该供应商已被企业停用*/),
            content: (
              <div><p>{messages('request.key251'/*请重新选择供应商*/)}{/*请重新选择供应商*/}</p></div>
            ),
            onOk() {
            },
          });
        }
      })
      this.setState({
        loading: false,
        data: data,
        pagination: {
          total: Number(res.headers['x-total-count']) || 0,
          current: page + 1,
          onChange: this.onChangePaper
        }
      })
    })
  };
  /**
   * value为传入值
   * @param nextProps
   */
  componentWillReceiveProps = (nextProps) => {
    if (!nextProps.value) {
      this.setState({
        selectedRowKeys: [],
        selectedRows: [],
        value: ""
      })
    } else if (nextProps.value !== this.props.value) {
      this.setState({ value: nextProps.value }, () => {
        const { value } = this.state;
        value && this.getAccountList(value.split(",")[0], (value.split(",")[1]));
      })
    }
  };

  getAccountList = (id = this.state.chooseInfo.id, bankId) => {
    this.setState({loading: true});
    const {accountModalVisible} = this.state;
    requestService.getAccountInfo(id).then(res => {
      // let data = res.data.body[0];
      //返回接口数据结构改变
      let data = res.data;
      let bankAccounts = data.venBankAccountBeans;
      //fixbug 36485
      this.setState({ chooseInfo: data });
      if (!bankAccounts || bankAccounts.length === 0) {
        this.setState({
          loading: false,
          accountData: bankAccounts,
          selectedRowKeys: [],
        });
        accountModalVisible ? (this.setState({
          chooseRows: [],
          chooseInfo: data
        })) : (this.setState({
          selectedRows: [],
          payeeInfo: data
        }));
        return;
      }
      let select = -1;
      for (let i = 0; i < bankAccounts.length; i++) {
        //没有bankId，则默认值为启用的第一个
        if (bankAccounts[i].venType === 1001 && !bankId) {
          select = i;
          break;
        }
        //有bankId，勾选中已选值
        if (bankId && bankAccounts[i].id === bankId) {
          select = i;
          break;
        }
      }
      if(select === -1) {
        this.setState({
          loading: false,
          accountData: bankAccounts,
          selectedRowKeys: [],
        });
        accountModalVisible ? (this.setState({
          chooseRows: [],
          chooseInfo: data
        })) : (this.setState({
          selectedRows: [],
          payeeInfo: data
        }));
        return;
      }
      this.setState({
        loading: false,
        accountData: bankAccounts,
        selectedRowKeys: [bankAccounts[select].id],
      });
      accountModalVisible ? (this.setState({
        chooseRows: [bankAccounts[select]],
        chooseInfo: data
      })) : (this.setState({
        selectedRows: [bankAccounts[select]],
        payeeInfo: data
      }));
    })
  };

  onChangePaper = (page) => {
    if (page - 1 !== this.state.page) {
      this.setState({page: page - 1}, () => {
        this.getVenMasterList()
      })
    }
  };

  handlePayeeModalShow = (visible) => {
    this.setState({payeeModalVisible: visible}, () => {
      this.state.payeeModalVisible && this.getVenMasterList()
    })
  };

  handleAccountModalShow = (visible) => {
    this.setState({
      payeeModalVisible: !visible,
      accountModalVisible: visible
    }, () => {
      this.state.payeeModalVisible && this.getVenMasterList();
      this.state.accountModalVisible && this.getAccountList()
    })
  };
  clickAccountModalShow = (visible) => {
    this.setState({
      accountModalVisible: visible,
      selectedRowKeys: [this.state.value.split(',')[1]]
    }, () => {
      this.state.accountModalVisible && this.getAccountList();
      this.state.payeeModalVisible && this.getVenMasterList()
    })
  };

  //搜索
  onSearch = (values) => {
    this.setState({ searchParams: values || {} },() => {
      this.getVenMasterList()
    })
  };

  //根据银行账号搜索供应商
  onSearchAccountInfo = (values) => {
    const { chooseInfo, accountInfoSearchForm } = this.state;
    let keyword = (values && values.keyword) ? values.keyword : '';
    this.setState({loading: true});
    requestService.searchAccountInfo(chooseInfo.id, keyword).then(res => {
      let bankAccounts = res.data.venBankAccountBeans;
      this.setState({loading: false, accountData: bankAccounts});
    });
  };

  onRowClick = (record) => {
    this.setState({chooseInfo: record}, () => {
      this.handleAccountModalShow(true)
    })
  };

  //选择账户
  handleAccountChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRowKeys: selectedRowKeys,
      chooseRows: selectedRows
    })
  };
  getCheckboxAccountDisable = (record) => {
    return {
      disabled: record.venType === 1002
    }
  };

  handleModalOk = () => {
    let ids = [];
    const {chooseInfo, chooseRows, selectedRows} = this.state;
    this.setState({payeeInfo: chooseInfo, selectedRows: chooseRows}, () => {
      ids.push(this.state.payeeInfo.id, this.state.selectedRowKeys[0]);
      if (this.state.selectedRows[0]) {
        this.setState({
          accountModalVisible: false,
          value: ids.join()
        }, () => {
          this.onChange(this.state.value)
        })
      } else {
        message.warning(messages('request.key252'/*请选择收款账号*/))
      }
    })
  };

  handleModalCancel = () => {
    this.setState({accountModalVisible: false});
  };

  // 新增供应商操作
  handleNewVendorOk = (value) => {
    //新增银行账户成功之后，返回直接重新刷新供应商模态框
    this.setState({
      newVendorVisible: false,
      accountModalVisible: true,
    },()=>{
      this.getAccountList(value.id);
    })
  };
  //删除
  handleDelete = () => {
    this.setState({
      selectedRowKeys: [],
      selectedRows: [],
      value: ""
    }, () => {
      this.onChange(this.state.value)
    })
  };

  //取消
  handleCancel = () => {
    this.handlePayeeModalShow(false);
    !this.props.value && this.setState({
      selectedRowKeys: [],
      selectedRows: [],
      value: ""
    }, () => {
      this.onChange(this.state.value)
    })
  };
  // 关闭新增供应商
  handleCancelNewVendor = () => {
    if (this.state.chooseInfo.id) {
      this.setState({newVendorVisible: false, accountModalVisible: true});
      return !1;
    }
    this.setState({newVendorVisible: false, payeeModalVisible: true});
  };

  onChange = (changedValue) => {
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(changedValue);
    }
  };
  renderClass = (record) => {
    return record.venType === 1002 ? '' : ''
  };

  renderAllExpandedRow = (record) => {
    return record.venType === 1002 ? '该银行账户已被企业停用' : '';
  };

  renderVenMasterDetailRow = (label, value) => (
    <Row>
      {label}：<span style={{color: '#333'}}>{value}</span>
    </Row>
  );

  renderVenMasterDetail = () => {
    const { payeeInfo, selectedRows } = this.state;
    let content = (
      <div>
        {this.renderVenMasterDetailRow(messages('request.key253'/*供应商开户名称*/), payeeInfo.venNickname)}
        {this.renderVenMasterDetailRow(messages('request.key242'/*供应商收款账号*/), selectedRows[0].bankAccount)}
        {this.renderVenMasterDetailRow(messages('request.key140'/*开户银行*/), selectedRows[0].bankName)}
        {this.renderVenMasterDetailRow(messages('request.key243'/*开户银行联行号*/), selectedRows[0].bankCode)}
        {this.renderVenMasterDetailRow(messages('request.key244'/*开户银行所在地*/), selectedRows[0].bankOpeningCity)}
      </div>
    );
    return (
      <Popover content={content}>
        <a style={{color: '#fe9a07'}}>{payeeInfo.venNickname} | {selectedRows[0].bankAccount}</a>
      </Popover>
    )
  };

  render() {
    const {loading, payeeModalVisible, newVendorVisible, accountModalVisible, pagination,
      searchForm, columns, data, footer, payeeInfo, accountData, accountColumns,
      selectedRowKeys, selectedRows, chooseInfo, accountFooter, accountInfoSearchForm} = this.state;
    const {userOid, companyOid} = this.props;
    const rowSelection = {
      type: 'radio',
      selectedRowKeys: selectedRowKeys,
      onChange: this.handleAccountChange,
      getCheckboxProps: this.getCheckboxAccountDisable
    };
    let card_extra = (
      <div>
        <a onClick={() => {
          this.clickAccountModalShow(true)
        }}>{messages('common.edit')/*编辑*/}</a>
        <span className="ant-divider"/>
        <Popconfirm title={messages('common.confirm.delete')} onConfirm={this.handleDelete}>
          <a>{messages('common.delete')}</a>
        </Popconfirm>
      </div>
    );
    return (this.props.onlyShow ? (
      <div className="new-ven-master">
        {selectedRows[0] ? this.renderVenMasterDetail() : '-'}
      </div>
    ) : (
      <div className="new-ven-master">
        {selectedRows[0] ? (
          <Card title={messages('request.key254'/*收款单位*/)} extra={card_extra} className="account-card">
            <Card.Grid className='card-left'>{messages('request.key253'/*供应商开户名称*/)}</Card.Grid>
            <Card.Grid className='card-right'>
              <Popover content={payeeInfo.venNickname}>
              <div className='card-right-content'>{payeeInfo.venNickname}</div>
              </Popover>
            </Card.Grid>

            <Card.Grid className='card-left'>{messages('request.key242'/*供应商收款账号*/)}</Card.Grid>
            <Card.Grid className='card-right'>
              <Popover content={selectedRows[0].bankName}>
              <div className='card-right-content'>{selectedRows[0].bankAccount}</div>
              </Popover>
            </Card.Grid>
            <Card.Grid className='card-left'>{messages('request.key140'/*开户银行*/)}</Card.Grid>
            <Card.Grid className='card-right'>
              <Popover content={selectedRows[0].bankName}>
              <div className='card-right-content'>{selectedRows[0].bankName}</div>
            </Popover>
            </Card.Grid>
            <Card.Grid className='card-left'>{messages('request.key243'/*开户银行联行号*/)}</Card.Grid>
            <Card.Grid className='card-right'>
              <Popover content={selectedRows[0].bankCode}>
              <div className='card-right-content'>{selectedRows[0].bankCode}</div>
              </Popover>
            </Card.Grid>

            <Card.Grid className='card-left'>{messages('request.key244'/*开户银行所在地*/)}
            </Card.Grid>
            <Card.Grid className='card-right'>
              <Popover content={selectedRows[0].bankOpeningCity}>
              <div className='card-right-content'>{selectedRows[0].bankOpeningCity}</div>
              </Popover>
            </Card.Grid>
          </Card>
        ) : (
          <a onClick={() => this.handlePayeeModalShow(true)}>
            <Icon type="plus-circle-o" className="add-budget-detail-icon"/>{messages('request.key255'/*添加*/)}
          </a>
        )}
        <Modal visible={payeeModalVisible}
               wrapClassName="new-ven-master"
               className="ven-master-modal"
               title={messages('request.key256'/*添加收款人信息*/)}
               width={800}
               footer={footer}
               onCancel={this.handleCancel}>
          <SearchArea searchForm={searchForm}
                      submitHandle={this.onSearch}
                      clearHandle={this.onSearch}/>
          <Table rowKey="id"
                 columns={columns}
                 dataSource={data}
                 loading={loading}
                 pagination={pagination}
                 onRow={record => ({
                   onClick: () => record.venType === 1001 && this.onRowClick(record)
                 })}
                 rowClassName={this.renderClass}
                 bordered
                 size="middle"/>
        </Modal>
        <Modal visible={accountModalVisible}
               wrapClassName="new-ven-master"
               className="payment-account-modal"
               title={`${messages('request.key257'/*供应商详情*/)}:${messages('request.key252'/*请选择收款账号*/)}`}
               width={800}
               onCancel={this.handleModalCancel}
               footer={accountFooter}>
          {accountModalVisible && (
            <SearchArea searchForm={accountInfoSearchForm}
                        submitHandle={this.onSearchAccountInfo}
                        clearHandle={this.onSearchAccountInfo}/>
          )}
          <div className="account-name">
            {messages('request.key253'/*供应商开户名称*/)}：
            <h3>{chooseInfo.venNickname || payeeInfo.venNickname}</h3>
          </div>
          <div className="account-list">
            <Table rowKey="id"
                   columns={accountColumns}
                   dataSource={accountData}
                   loading={loading}
                   pagination={false}
                   rowSelection={rowSelection}
                   rowClassName={record => {
                     return record.venType === 1002 ? 'row-warning' : 'row-expand-display-none'
                   }}
                   expandedRowRender={this.renderAllExpandedRow}
                   bordered
                   size="middle"/>
          </div>
        </Modal>
        {/* 新增供应商弹窗*/}
        <Modal visible={newVendorVisible}
               wrapClassName="new-vendor-modal"
               title={chooseInfo.id ? `${messages('request.key248'/*新增银行账号*/)}` : `${messages('request.key246'/*新增供应商*/)}`}
               cancelText={messages('common.back')/*返回*/}
               width={700}
               onCancel={this.handleCancelNewVendor}
               footer={null}>
          <NewVendorForm visible={newVendorVisible}
                         onCancel={this.handleCancelNewVendor}
                         payeeInfo={chooseInfo}
                         userOid={userOid}
                         companyOid={companyOid}
                         currentVendor={{}}
                         onOk={this.handleNewVendorOk}/>
        </Modal>
      </div>
    ))
  }
}

NewVenMaster.propTypes = {
  value: React.PropTypes.string,
  companyOid: React.PropTypes.string,
  userOid: React.PropTypes.string,
  onlyShow: React.PropTypes.bool, //是否用于详情页的展示
};

NewVenMaster.defaultProps = {
  value: '',
  onlyShow: false,
  companyOid: '',
  userOid: ''
};

function mapStateToProps(state) {
  return {}
}

const wrappedNewVenMaster = Form.create()(NewVenMaster);

export default connect(mapStateToProps)(wrappedNewVenMaster)
